<template>
    <AdminMain>
        <div class="tool">
            <el-form inline :model="search_form" ref="form_search" :rules="search_rules" label-width="80px" size="normal">
                <el-form-item label="导航名称" prop="name">
                    <el-input v-model="search_form.name"></el-input>
                </el-form-item>
                <el-form-item label="导航链接" prop="url">
                    <el-input v-model="search_form.url"></el-input>
                </el-form-item>
                <el-form-item label="导航分类" prop="assort_id">
                    <el-select v-model="search_form.assort_id">
                        <el-option label="全部" :value="0"></el-option>
                        <el-option v-for="item in assortList" :key="item.name" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchSubmit">搜索</el-button>
                    <el-button @click="searchReset">清空</el-button>
                    <el-button type="success" @click="showDrawer('create')">新建导航</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table class="assort-table" :data="naviList?.data" border stripe>
            <el-table-column prop="id" label="ID" width="90" align="center" />
            <el-table-column prop="name" label="导航名称" width="180" />
            <el-table-column prop="url" label="导航链接" width="280" />
            <el-table-column prop="Assort.name" label="导航分类" width="180" />
            <el-table-column prop="sort" label="排序" width="80" align="center" />
            <el-table-column prop="icon" label="图标地址" width="180" />
            <el-table-column prop="desc" label="描述" min-width="180" />
            <!-- <el-table-column prop="created_at" label="创建时间" align="center" :formatter="formatTime" min-width="180" /> -->
            <el-table-column prop="updated_at" label="最后修改时间" align="center" :formatter="formatTime" min-width="180" />
            <el-table-column label="操作" width="140" align="center" fixed="right">
                <template #default="{ row }">
                    <el-button type="primary" size="small" @click="showDrawer('update', row)">编辑</el-button>
                    <el-popconfirm title="确定要删除吗?" @confirm="delAssort(row.id)">
                        <template #reference>
                            <el-button type="danger" size="small">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background v-model:current-page="page" v-model:page-size="limit" :page-sizes="[10, 20, 50]"
            layout="total, sizes, prev, pager, next" :total="naviList?.total" @size-change="getNaviList"
            @current-change="getNaviList" />
        <el-drawer v-model="drawer" :title="drawerTitle" :before-close="handleClose">
            <el-form :model="navi_form" ref="form" :rules="rules" label-width="80px">
                <el-form-item label="导航名称" prop="name">
                    <el-input v-model="navi_form.name"></el-input>
                </el-form-item>
                <el-form-item label="导航地址" prop="url">
                    <el-input v-model="navi_form.url"></el-input>
                </el-form-item>
                <el-form-item label="导航分类" prop="assort_id">
                    <el-select v-model="navi_form.assort_id">
                        <el-option v-for="item in assortList" :key="item.name" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="导航图标" prop="icon">
                    <el-input v-model="navi_form.icon"></el-input>
                </el-form-item>
                <el-form-item label="描述" prop="desc">
                    <el-input v-model="navi_form.desc"></el-input>
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input-number v-model="navi_form.sort"></el-input-number>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">立即创建</el-button>
                    <el-button @click="handleClose">取消</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>
    </AdminMain>
</template>

<script setup lang="ts">
import AdminMain from '@/layout/adminMain.vue'
import { FormInstance, FormRules } from 'element-plus'
import { ref, onBeforeMount, reactive } from 'vue'
import { createNavigation, deleteNavigation, updateNavigation, getNavigations, getAssorts } from '@/apis/auth'
import { formatTime } from '@/utils/help'

const page = ref(1)
const limit = ref(10)
const naviList = ref<PageResponse<NavigationModel>>()
const assortList = ref<AssortModel[]>()
const navi_form = ref<NavigationModel>({ name: "", url: "", sort: 10, assort_id: 0 })
const form_search = ref<FormInstance>()
const search_form = ref<NavSearchForm>({ name: '', url: '', assort_id: 0 })
const drawer = ref(false)
const drawerTitle = ref('新建导航')
const form = ref<FormInstance>()
const rules = reactive<FormRules>({
    name: [{ required: true, message: '请输入导航名称', trigger: 'blur', },
    { max: 20, message: '导航名称最多20个字符', trigger: 'blur' }],
    url: [{ required: true, message: '请输入导航地址', trigger: 'blur' },
    { max: 200, message: '导航地址最多200个字符', trigger: 'blur' }],
    assort_id: [{ required: true, message: '请选择导航分类', trigger: 'blur' }],
    icon: [{ max: 200, message: '图标地址最多200个字符', trigger: 'blur' }],
    desc: [{ max: 200, message: '导航描述最多200个字符', trigger: 'blur' }],
    sort: [{ required: true, message: '请输入排序', trigger: 'blur', },
    { type: 'number', message: '排序必须为数字', trigger: 'blur' }],
})
const search_rules = reactive<FormRules>({
    name: [{ max: 20, message: '导航名称最多20个字符', trigger: 'blur' }],
    url: [{ max: 200, message: '导航地址最多200个字符', trigger: 'blur' }]
})

async function getNaviList() {
    const r = await getNavigations({
        page: page.value,
        limit: limit.value,
        ...search_form.value
    })
    naviList.value = r.data
}
async function getAssortList() {
    const r = await getAssorts()
    assortList.value = r.data
    if (r.data.length) {
        navi_form.value.assort_id = r.data[0].id!
    }
}
function showDrawer(type: string = 'create', row?: NavigationModel) {
    drawerTitle.value = type === 'create' ? '新建导航' : '修改导航'
    row && (navi_form.value = row)
    drawer.value = true
}
function handleClose() {
    navi_form.value = { name: "", url: "", sort: 10, assort_id: assortList.value![0].id! }
    form.value?.resetFields()
    drawer.value = false
}
function onSubmit() {
    form.value?.validate(async (valid) => {
        if (valid) {
            // console.log(navi_form.value)
            const r = drawerTitle.value === '新建导航' ? await createNavigation(navi_form.value) : await updateNavigation(navi_form.value)
            if (r.error_code == 0) {
                await getNaviList()
                handleClose()
            }
        }
    })
}
function delAssort(id: number) {
    deleteNavigation(id).then(r => {
        if (r.error_code == 0) {
            getNaviList()
        }
    })
}
function searchReset() {
    form_search.value?.resetFields()
    getNaviList()
}
function searchSubmit() {
    form_search.value?.validate(async (valid) => {
        if (valid) {
            await getNaviList()
        }
    })
}


onBeforeMount(() => {
    getNaviList()
    getAssortList()
})
</script>

<style lang="scss" scoped>
.assort-table {
    margin: 20px 0;
}
</style>